<template>
  <div class="box">
    <div class="zyxm_img">
      <img src="/static/img/banner.png" alt="">
    </div>
    <div class="zyxm_form">
      <div class="form_title overflowEllipsis">
        {{details.projectName}}
      </div>
      <div class="form_list flex">
        <div class="form_list_lf flexVam">
          <i class="icon iconfont icon-biao"></i>
        </div>
        <div class="form_list_lr overflowEllipsis">
          举办时间:&nbsp;&nbsp;&nbsp;{{details.holdingTime}}
        </div>
      </div>
      <div class="form_list flex">
        <div class="form_list_lf flexVam">
          <i class="icon iconfont icon-jianzhu"></i>
        </div>
        <div class="form_list_lr overflowEllipsis">
          举办单位:&nbsp;&nbsp;&nbsp;{{details.holdingCompany}}
        </div>
      </div>
      <div class="form_list flex">
        <div class="form_list_lf flexVam">
          <i class="icon iconfont icon-dizhi"></i>
        </div>
        <div class="form_list_lr overflowEllipsis">
          地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点:&nbsp;&nbsp;&nbsp;{{details.venue}}
        </div>
      </div>
      <div class="form_list flex">
        <div class="form_list_lf flexVam">
          <i class="icon iconfont icon-qunzu"></i>
        </div>
        <div class="form_list_lr form_list_lrlast overflowEllipsis">
          名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额:&nbsp;&nbsp;&nbsp;{{details.projectQuota}}
        </div>
      </div>
    </div>
    <div class="zyxm_users">
      <div class="zyxm_users_list flex">
        <div class="users_lf">
          已报名
        </div>
        <div class="users_lc flex">
          <ul class="flex">
            <li class="users_item" v-for="(e,i) in users" v-show="i < 5" :key="i">
              {{
              e.name
              }}
            </li>
          </ul>
        </div>
        <div class="users_lr flex">
          {{users.length}} <i class="icon iconfont icon-fanhui-copy"></i>
        </div>
      </div>
    </div>
    <div class="zyxm_txt">
      <div class="txt_title">
        活动详情
      </div>
      <div class="txt_main" v-html="details.projectIntroduction">

      </div>
    </div>
    <div class="zyxm_but">
      <div class="zyxm_button">
        报名
      </div>
    </div>
  </div>
</template>
<script>
import taskApi from "../../requestApi/taskApi";
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      details: {},
      users: []
    };
  },
  created: function() {},
  mounted() {
    let self = this;
    self.baseUserMessageDistributeFun();
    window.getAppgetUserToken = function(val) {
      self.baseUserInfoFun(val);
      self.listFun();
    };
    this.titleFun({
      title: "详情"
    });
  },
  methods: {
    async listFun() {
      let self = this;
      let params = {
        id: this.$route.query.id
      };
      let res = await taskApi.GetApivolunteerprojectinfo(params);
      if (res.statusCode == 200) {
        self.details = {
          ...res.data
        };
        // self.users = res.data.volunteerProjectSignUpList;
      } else {
        Toast({
          message: res.statusMessage,
          position: "bottom"
        });
      }
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
.txt_main {
  width: calc(100% - 1.1733rem);
  margin-left: 0.5867rem;
  line-height: 0.5867rem;
  font-size: 0.3733rem;
  color: #000;
  margin-bottom: 0.5867rem;
}
.txt_title {
  height: 1.2267rem;
  line-height: 1.2267rem;
  font-size: 0.32rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  padding-left: 0.48rem;
}
/* 头像列表  */
.users_item {
  width: 1.12rem;
  height: 1.12rem;
  margin-right: 0.2133rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8343a;
  color: #fff;
  font-size: 0.4267rem;
  border-radius: 50%;
}
.users_item img {
  width: 100%;
  height: 100%;
}
.users_lr i {
  margin-left: 0.1333rem;
  font-size: 0.32rem;
  margin-top: 0.0533rem;
}
.users_lr {
  font-size: 0.32rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  height: 1.12rem;
  line-height: 1.12rem;
  margin-left: 0.4267rem;
}
.users_lc {
  width: 6.4533rem;
  height: 1.12rem;
}
.users_lf {
  font-size: 0.32rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  height: 1.12rem;
  line-height: 1.12rem;
  margin-right: 0.3467rem;
}
.zyxm_users_list {
  height: 1.12rem;
  width: calc(100% - 0.9333rem);
  margin-left: 0.5067rem;
  margin-top: 0.6133rem;
  overflow: hidden;
}
.zyxm_users {
  overflow: hidden;
  margin-top: 0.32rem;
  width: 100%;
  height: 2.3467rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0rem 0.1333rem 0rem rgba(237, 237, 237, 1);
}
/* 头像列表  */
.form_list_lr {
  width: calc(100% - 1.2rem);
  padding-right: 0.3733rem;
  height: 1.2533rem;
  font-size: 0.32rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 1.2533rem;
  position: relative;
}
.form_list_lr::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #e5ecef;
  height: 0.0267rem;
  content: "";
}
.form_list_lrlast::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #e5ecef;
  height: 0rem !important;
  content: "";
}
.form_list_lf i {
  font-size: 0.3467rem;
  color: #b6b6b6;
}
.form_list_lf {
  width: 1.2rem;
  height: 1.2533rem;
}
.form_list {
  height: 1.2533rem;
  width: 100%;
}
.form_title {
  font-size: 0.4267rem;
  font-family: FZLTZHK--GBK1-0;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  line-height: 1.3867rem;
  height: 1.3867rem;
  width: 100%;
  border-bottom: 0.0267rem solid rgba(229, 236, 239, 1);
}
.zyxm_button {
  width: 9.4667rem;
  height: 1.1733rem;
  background: rgba(222, 42, 46, 1);
  border-radius: 0.08rem;
  font-size: 0.4267rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 1.1733rem;
  text-align: center;
  margin: 0 auto;
  margin-top: 0.32rem;
}
.zyxm_but {
  margin-top: 0.08rem;
  height: 1.8133rem;
  background: rgba(255, 255, 255, 1);
  border: 0.0267rem solid rgba(235, 235, 235, 0.75);
  box-shadow: 0rem -0.0267rem 0.1333rem 0rem rgba(242, 240, 240, 1);
}
.zyxm_txt {
  overflow: hidden;
  margin-top: 0.32rem;
  min-height: 2.9333rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0rem 0.1333rem 0rem rgba(237, 237, 237, 1);
}

.zyxm_form {
  width: 100%;
  height: 6.4533rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0rem 0.1333rem 0rem rgba(237, 237, 237, 1);
}
.zyxm_img {
  width: 100%;
  height: 5.4133rem;
}
.zyxm_img img {
  width: 100%;
  height: 100%;
}
.box {
  background-color: #f4f7f8;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
</style>